<template>
	<view>
		<view class="setup-content" v-for="item in settingList" :key="item.label" @click="goTo(item.url)">
			<u-gap height="30" bg-color="#f8f8f8" v-if="item.noborder"></u-gap>
			<view class="container">
				<view :class="[{'items':true,'noborder':item.noborder}]">
					<view class="label">{{item.label}}</view>
					<view class="val">
						<view class="">
							{{item.text}}
						</view>
						<u-switch v-model="item.checked" active-color="#0fcd87" inactive-value="#666" v-if="item.label == '微信' || item.label == 'QQ' || item.label == '微博'"></u-switch>
						<u-icon name="arrow-right" v-else></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="logoutBtn" @click="isShow = true">
			退出
		</view>
		<!-- 模态框  -->
		<u-modal v-model="isShow" :title="title" :title-style="{fontWeight:700}" width="80%" :show-confirm-button="false"
			 :content-style="contentStyle">
			<view class="common-model-content">
				<rich-text :nodes="content"></rich-text>
				<view class="common-model-button">
					<view :style="cancelStyle" @click="closeModal">取消</view>
					<view :style="confirmStyle" @click="confirmHandle">{{confirmText}}</view>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import storage from "@/utils/storage.js";
	export default {
		data() {
			return {
				// 模态框
				isShow:false,
				title:"温馨提示",
				content:"确定退出登录吗？",
				confirmText:"确定",
				// 内容样式
				contentStyle: {
					height: "80rpx",
					marginTop: "50rpx",
					marginBottom: "180rpx",
					color: "#666666",
					fontSize: "30rpx",
					fontWeight: "500",
					lineHeight: "80rpx",
					textAlign: "center"
				},
				// 取消样式
				cancelStyle: {
					width: "32%",
					height: "80rpx",
					fontSize: "30rpx",
					fontWeight: "bold",
					lineHeight: "80rpx",
					backgroundColor: "#ECECEC",
					borderRadius: "40rpx",
				},
				// 确认样式
				confirmStyle: {
					width: "32%",
					height: "80rpx",
					color: "#fff",
					fontSize: "30rpx",
					fontWeight: "bold",
					lineHeight: "80rpx",
					backgroundColor: "#F4333C",
					borderRadius: "40rpx",
				},
				settingList: [
					{
						label: "设置密码",
						url: "setting/editPassword",
						noborder:true,
					}, {
						label: "修改手机号码",
						url: "setting/editPhone",
						noborder:false,
					}, {
						label: "服务开关",
						url: "setting/switch",
						noborder:true,
					}, {
						label: "服务设置",
						url: "setting/serviceSetting",
						noborder:false,
					}
					// ,{
					// 	label: "微信",
					// 	url: "",
					// 	noborder:true,
					// 	checked: false,
					// }, {
					// 	label: "QQ",
					// 	url: "",
					// 	noborder:false,
					// 	checked: false,
					// }, {
					// 	label: "微博",
					// 	url: "",
					// 	noborder:false,
					// 	checked: false,
					// }, {
					// 	label: "检查更新",
					// 	url: "",
					// 	noborder:true,
					// }, {
					// 	label: "清除缓存",
					// 	url: "",
					// 	noborder:false,
					// 	text:"23M"
					// }, {
					// 	label: "关于我们",
					// 	url: "",
					// 	noborder:false,
					// }

				]
			};
		},
		onLoad() {
			uni.removeStorageSync('allTimePeriods')
		},
		methods: {
			// 关闭模态框
			closeModal(){
				this.isShow = false;
			},
			// 确定退出
			confirmHandle() {
				this.isShow = false;
				this.$store.dispatch('A_loginOut')
			},
			// 跳转
			goTo(url) {
				uni.navigateTo({
					url: "/pages/mine/" + url,
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.setup-content {
		background-color: #fff;

		.noborder{
			border: none !important;
		}

		.items {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 110rpx;
			border-top: 1rpx #E3E3E3 solid;
			font-size: 30rpx;

			.label {
				width: 30%;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}

			.val {
				display: flex;
				align-items: center;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;

				/deep/.u-iconfont {
					margin-left: 17rpx;
				}
			}

		}
	}
	// 退出
	.logoutBtn {
		width: 100%;
		height: 88rpx;
		background-color: #fff;
		line-height: 88rpx;
		text-align: center;
		color: $active-color;
		margin: 150rpx auto 0;
	}
</style>
